{extends file="backend/index.tpl"}
{block name="page-content"}
<script type="text/javascript">
$(document).ready(function(){
	$(".edit_tr").click(function()
	{
		var ID=$(this).attr('id');
		$("#chapterNo_"+ID).hide();
		$("#chapterName_"+ID).hide();
		$("#chapterUname_"+ID).hide();
		$("#chapterBook_"+ID).hide();
		$("#chapterVolume_"+ID).hide();
		$("#chapterOpen_"+ID).hide();
		$("#chapterNextNo_"+ID).hide();
		$("#chapterPrevNo_"+ID).hide();
		
		$("#chapterNo_input_"+ID).show();
		$("#chapterName_input_"+ID).show();
		$("#chapterUname_input_"+ID).show();
		$("#chapterBook_input_"+ID).show();
		$("#chapterVolume_input_"+ID).show();
		$("#chapterOpen_input_"+ID).show();
		$("#chapterNextNo_input_"+ID).show();
		$("#chapterPrevNo_input_"+ID).show();
	}).change(function()
	{
		var ID=$(this).attr('id');
		var chapterNo=$("#chapterNo_input_"+ID).val();
		var chapterName=$("#chapterName_input_"+ID).val();
		var chapterUname=$("#chapterUname_input_"+ID).val();
		var chapterBook=$("#chapterBook_input_"+ID).val();
		var chapterVolume=$("#chapterVolume_input_"+ID).val();
		var chapterOpen=$("#chapterOpen_input_"+ID).val();
		var chapterNextNo=$("#chapterNextNo_input_"+ID).val();
		var chapterPrevNo=$("#chapterPrevNo_input_"+ID).val();
		
		var dataString = 'id='+ ID +'&chapterNo='+chapterNo+'&chapterName='+chapterName+'&chapterUname='+chapterUname+'&chapterBook='+chapterBook+'&chapterVolume='+chapterVolume+'&chapterOpen='+chapterOpen+'&chapterNextNo='+chapterNextNo+'&chapterPrevNo='+chapterPrevNo;
		
		$("#chapterNo_"+ID).html('<img src="http://localhost/truyen/public/backend/img/load.gif" />');
		$("#chapterName_"+ID).html('<img src="http://localhost/truyen/public/backend/img/load.gif" />');
		$("#chapterUname_"+ID).html('<img src="http://localhost/truyen/public/backend/img/load.gif" />');		
		$("#chapterBook_"+ID).html('<img src="http://localhost/truyen/public/backend/img/load.gif" />');
		$("#chapterVolume_"+ID).html('<img src="http://localhost/truyen/public/backend/img/load.gif" />');
		$("#chapterOpen_"+ID).html('<img src="http://localhost/truyen/public/backend/img/load.gif" />');
		$("#chapterNextNo_"+ID).html('<img src="http://localhost/truyen/public/backend/img/load.gif" />');
		$("#chapterPrevNo_"+ID).html('<img src="http://localhost/truyen/public/backend/img/load.gif" />');	
		
		$.ajax({
			type: "POST",
			url: 'http://localhost/truyen/admin/ajax/updateChapterList',
			data: dataString,
			cache: false,
			success: function(html)
			{
				console.log(html);
				$("#chapterNo_"+ID).html(chapterNo);
				$("#chapterName_"+ID).html(chapterName);
				$("#chapterUname_"+ID).html(chapterUname);
				$("#chapterBook_"+ID).html(chapterBook);
				$("#chapterVolume_"+ID).html(chapterVolume);
				$("#chapterOpen_"+ID).html(chapterOpen);
				$("#chapterNextNo_"+ID).html(chapterNextNo);
				$("#chapterPrevNo_"+ID).html(chapterPrevNo);
			}
		});		
	});
	
	$(".editbox").mouseup(function() {
		return false
	});
	
	$(document).mouseup(function(){
		$(".editbox").hide();
		$(".text").show();
	});

});
</script>

{literal}
<style>
	.editbox
	{
		display:none;
	}
	.editbox
	{
		font-size:14px;
		width: 70px;
		background-color:#ffffcc;
		border:solid 1px #000;
		padding:4px;
	}
	.edit_tr:hover
	{
		background:url(http://localhost/truyen/public/backend/img/edit.png) right no-repeat #80C8E5;
		cursor:pointer;
	}

</style>
{/literal}
<div class="page-header">
    <div class="icon">
        <span class="ico-pen-2"></span>
    </div>
    <h1>CHƯƠNG <small>QUẢN LÝ CHƯƠNG</small></h1>
</div>
<div class="row-fluid">
    <div class="span12">
        <div class="block">
        	<table>
            	<tr>
            		<td>
                    	<form method="POST" action="{$base_url}admin/list-chapter.html">
            				<div class="span5">
            					<select name="chapterBook" class="select" style="width: 220px; margin-bottom:0px !important;">
            							<option value="0" >Chọn Truyện</option>
            						{foreach from=$listBook item=book}
            							<option value="{$book.book_id}" {if isset($book_selected) And $book_selected eq $book.book_id}Selected{/if} >{$book.book_name}</option>
            						{/foreach}
            					</select>
            				</div>&nbsp;&nbsp;&nbsp;&nbsp;
            				<button class="btn btn-primary" type="submit">&nbsp;&nbsp;&nbsp;Lọc Truyện&nbsp;&nbsp;&nbsp;&nbsp;</button>
                        </form><br>
                	</td>
                	<td>
                        <form method="POST" action="{$base_url}admin/chapter/listChapterByNo/">
            				<div class="span6">
            					<input type="text" class="validate[required,custom[integer]]" name="chapterNo" {if isset($chapter_no)}value="{$chapter_no}"{/if}/>
            				</div>&nbsp;&nbsp;&nbsp;&nbsp;
            				<button class="btn btn-primary" type="submit">&nbsp;&nbsp;&nbsp;&nbsp;Tìm Chương&nbsp;&nbsp;&nbsp;&nbsp;</button>
                        </form><br>
                	</td>
    			</tr>
				<tr>
					<td>
						<form method="POST" action="{$base_url}admin/add-chapter.html">
							<button type="submit" class="btn btn-warning" >Thêm Chương Mới</button>
						</form>
					</td>
					<td></td>
				</tr>
				<tr>
					<td>
						<form method="POST" action="{$base_url}admin/import-chapter.html"  enctype="multipart/form-data">
							<div class="row-form" style="padding: 10px 0px !important;">
								<table>
									<tr>
										<td>
											<div class="span3" >
												<select name="bookID" class="select" style="width: 220px; margin-bottom:0px !important;">
                            						<option value="0" >Nhớ Chọn Sách Import Nha</option>
                            						{foreach from=$listBook item=book}
                            						<option value="{$book.book_id}">{$book.book_name}</option>
                            						{/foreach}
                            					</select>
                        					</div>
										</td>
										<td>
											<div class="input-append file" style="width: 200px;">
				                                <input type="file" name="importChapter" style="width: 200px;"/>
				                                <input type="text"/>
				                            </div> 
			                            </td>
			                            <td>
	                           				 <button type="submit" name="import" class="btn btn-warning" >Import Chapter</button>
	                           			</td>
	                            	</tr>
	                            </table>
							</div>
						</form>
					</td>
					<td>
						<form method="POST" action="{$base_url}admin/export-chapter.html">
							<button type="submit" class="btn btn-warning" >Export Chapter</button>
						</form>
					</td>
				</tr>
			</table>
			
            <div class="head dblue">
                <div class="icon"><span class="ico-layout-9"></span></div>
                <h2>Danh Sách Chương</h2>
                <ul class="buttons">
                    <li><a href="#" onClick="source('table_sort_pagination'); return false;">
                        <div class="icon"><span class="ico-info"></span></div>
                    </a></li>
                </ul>
            </div>
            <div class="data-fluid">
                <table class="table lcnp" id="listGame" cellpadding="0" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Chương</th>
                            <th>Name</th>
                            <th>Unique Name</th>
                            <th>Book Name</th>
                            <th>Volume</th>
                            <!-- <th>Decription</th> -->
                            <th>Open</th>
                            <th>Next_No</th>
                            <th>Prev_No</th>
                            <th class="TAC">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                    {foreach from=$listChapter item=chapter}
                        <tr id="{$chapter.chapter_id}" class="edit_tr">
                            <td width="5%">{$chapter.chapter_id}</td>
                            <td width="5%">
                            	<span id="chapterNo_{$chapter.chapter_id}" class="text">
                                	{$chapter.chapter_no}
                                </span>
                                <input type="text" value="{$chapter.chapter_no}" class="editbox" id="chapterNo_input_{$chapter.chapter_id}" style="display: none;"/>
                            </td>
                            <td width="15%">
                            	<span id="chapterName_{$chapter.chapter_id}" class="text">
                                	{$chapter.chapter_name}
                                </span>
                                <textarea rows="1" cols="2" class="editbox" id="chapterName_input_{$chapter.chapter_id}" style="display: none; min-height: 80px !important; width: 110px;">{$chapter.chapter_name}</textarea>
                            </td>
                            <td width="15%">
                            	<span id="chapterUname_{$chapter.chapter_id}" class="text">
                                	{$chapter.chapter_uname}
                                </span>
                                <textarea rows="1" cols="2" class="editbox" id="chapterUname_input_{$chapter.chapter_id}" style="display: none; min-height: 80px !important; width: 110px;">{$chapter.chapter_uname}</textarea>
                            </td>
                            <td width="15%">
                            	<span id="chapterBook_{$chapter.chapter_id}" class="text">
                                	{$chapter.book_name}
                                </span>
                                <select name="type" class="editbox" id="chapterBook_input_{$chapter.chapter_id}" style="display: none; width: 150px;">
									{foreach from=$listBook item=book}
										<option value="{$book.book_id}" {if $chapter.chapter_book_id eq $book.book_id}Selected{/if}>{$book.book_name}</option>
									{/foreach}
								</select>
                            </td>
                            <td width="5%">
                            	<span id="chapterVolume_{$chapter.chapter_id}" class="text">
                                	{if $chapter.volume_no > 0}{$chapter.volume_no}{else}<span style="color:red">0</span>{/if}
                                </span>
                                <input type="text" value="{$chapter.volume_no}" class="editbox" id="chapterVolume_input_{$chapter.chapter_id}" style="display: none;"/>
                            </td>
                            <!-- <td width="25%">{$chapter.chapter_description|truncate:100:'...'}</td> -->
                            <td width="5%">
                            	<span id="chapterOpen_{$chapter.chapter_id}" class="text">
                                {if $chapter.chapter_open eq 'Y'}Yes{elseif $chapter.chapter_open eq 'N'}No{elseif $chapter.chapter_open eq 'P'}PC{else}Mobile{/if}
                           		</span>
                           		<select name="type" class="editbox" id="chapterOpen_input_{$chapter.chapter_id}" style="display: none;">
                               		<option value="Y" {if $chapter.chapter_open eq 'Y'}Selected{/if}>Yes</option>
    								<option value="N" {if $chapter.chapter_open eq 'N'}Selected{/if}>No</option>
    								<option value="P" {if $chapter.chapter_open eq 'P'}Selected{/if}>PC</option>
    								<option value="M" {if $chapter.chapter_open eq 'M'}Selected{/if}>Mobile</option>
    							</select>
                            </td>
                            <td width="5%">
                            	<span id="chapterNextNo_{$chapter.chapter_id}" class="text">
                                	{$chapter.next_no}
                                </span>
                                <input type="text" value="{$chapter.next_no}" class="editbox" id="chapterNextNo_input_{$chapter.chapter_id}" style="display: none;"/>
                            </td>
                            <td width="5%">
                            	<span id="chapterPrevNo_{$chapter.chapter_id}" class="text">
                                	{$chapter.prev_no}
                                </span>
                                <input type="text" value="{$chapter.prev_no}" class="editbox" id="chapterPrevNo_input_{$chapter.chapter_id}" style="display: none;"/>
                            </td>
                            <td width="5%">
                                <a href="{$base_url}admin/update-chapter/chuong-{$chapter.chapter_no}-{$chapter.chapter_uname}.html" class="button green">
                                    <div class="icon"><span class="ico-pencil"></span></div>
                                </a>
                                <a href="{$base_url}admin/delete-chapter/chuong-{$chapter.chapter_no}-{$chapter.chapter_uname}.html" class="button red" onclick="return confirm('Bạn có muốn xóa tiếp không?')">
                                    <div class="icon"><span class="ico-remove"></span></div>
                                </a>
                            </td>
                        </tr>
                    {/foreach}
                    </tbody>
                </table>
            </div>
            <div class="pagination" style="text-align:center;">  
                {if isset($pageList)}{$pageList} {/if} 
              </div>
        </div>
    </div>
</div>

{/block}
